<template>
	<view class="container">
		<image src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/login-bg.png" mode="scaleToFill" class="bg" />
		<!-- 微信登录手机号登录按钮 -->
		<view class="login-btn">
			<button
				v-if="agreement"
				class="btn-wx"
				open-type="getPhoneNumber"
				@getphonenumber="handelMpWeixinMobileLogin($event)"
				@click="clickPhoneNumber"
				type="primary"
				size="mini"
				plain
			>
				快捷登录
			</button>
			<button v-else class="btn-wx" @click="clickPhoneNumber" type="primary" size="mini" plain>快捷登录</button>
			<view class="btn-phone" @click="toPage('pages/login/phone', 'dr')" type="primary" size="mini" plain>手机号登录</view>
			<view class="btn-none" @click="toPage('pages/index/index')" type="primary">暂不登录</view>
			<view class="des">未认证？点击<text class="auth" @click="toPage('pagesA/ParentalCertification')">认证</text></view>
		</view>
		<view class="agreementbox">
			<view class="check_box_btn" @click="agreement = !agreement">
				<view :class="agreement ? 'check_box1' : 'check_box2'">
					<image class="check_img" :src="agreement ? require('@/static/check1.png') : ''" />
				</view>
			</view>
			<text>已阅读并同意</text>
			<view class="xieyi" @click="isdetail = !isdetail">《隐私政策》</view>
		</view>
		<view class="agreementdetail" v-if="isdetail" @click="isdetail = false">
			<view class="content" @click.stop="">
				<view class="title"> 隐私政策 </view>
				<u-parse :content="content" @navigate="navigate"></u-parse>
			</view>
		</view>
	</view>
</template>

<script>
import store from '@/store'
import { isEmpty } from '@/utils/util'
import uParse from '@/components/feng-parse/parse.vue'
export default {
	components: {
		uParse
	},
	data() {
		return {
			email: '',
			password: '',
			agreement: false,
			isdetail: false,
			content: `本应用非常重视用户隐私政策并严格遵守相关的法律规定。请您仔细阅读《隐私政策》后再继续使用。如果您继续使用我们的服务，表示您已经充分阅读和理解我们协议的全部内容。&lt;/p&gt;&lt;p&gt;　　本小程序尊重并保护所有使用服务用户的个人隐私权。为了给您提供更准确、更优质的服务，本应用会按照本隐私权政策的规定使用和披露您的个人信息。除本隐私权政策另有规定外，在未征得您事先许可的情况下，本应用不会将这些信息对外披露或向第三方提供。本应用会不时更新本隐私权政策。 ↵您在同意本应用服务使用协议之时，即视为您已经同意本隐私权政策全部内容。&lt;/p&gt;&lt;p&gt;　　1. 适用范围&lt;/p&gt;&lt;p&gt;　　(a) 在您注册本应用小程序帐号时，您根据小程序要求提供的个人注册信息;&lt;/p&gt;&lt;p&gt;　　(b) ↵在您使用本应用网络服务，或访问本应用平台网页时，本应用自动接收并记录的您的浏览器和计算机上的信息，包括但不限于您的IP地址、浏览器的类型、使用的语言、访问日期和时间、软硬件特征信息及您需求的网页记录等数据;&lt;/p&gt;&lt;p&gt;　　(c) 本应用通过合法途径从商业伙伴处取得的用户个人数据。&lt;/p&gt;&lt;p&gt;　　(d)本应用严禁用户发布不良信息，如裸露、色情和亵渎内容，发布的内容我们会进行审核，一经发现不良信息，会禁用该用户的所有权限，予以封号处理。&lt;/p&gt;&lt;p&gt;　　2. 信息使用&lt;/p&gt;&lt;p&gt;　　(a)本应用不会向任何无关第三方提供、出售、出租、分享或交易您的个人登录信息。如果我们存储发生维修或升级，我们会事先发出推送消息来通知您，请您提前允许本应用消息通知。&lt;/p&gt;&lt;p&gt;　　(b) ↵本应用亦不允许任何第三方以任何手段收集、编辑、出售或者无偿传播您的个人信息。任何本应用平台用户如从事上述活动，一经发现，本应用有权立即终止与该用户的服务协议。&lt;/p&gt;&lt;p&gt;　　(c) ↵为服务用户的目的，本应用可能通过使用您的个人信息，向您提供您感兴趣的信息，包括但不限于向您发出产品和服务信息，或者与本应用合作伙伴共享信息以便他们向您发送有关其产品和服务的信息(后者需要您的事先同意)&lt;/p&gt;&lt;p&gt;　　3. 信息披露&lt;/p&gt;&lt;p&gt;　　在如下情况下，本应用将依据您的个人意愿或法律的规定全部或部分的披露您的个人信息：&lt;/p&gt;&lt;p&gt;　　(a) 未经您事先同意，我们不会向第三方披露;&lt;/p&gt;&lt;p&gt;　　(b)为提供您所要求的产品和服务，而必须和第三方分享您的个人信息;&lt;/p&gt;&lt;p&gt;　　(c) 根据法律的有关规定，或者行政或司法机构的要求，向第三方或者行政、司法机构披露;&lt;/p&gt;&lt;p&gt;　　(d) 如您出现违反中国有关法律、法规或者本应用服务协议或相关规则的情况，需要向第三方披露;&lt;/p&gt;&lt;p&gt;　　(e) 如您是适格的知识产权投诉人并已提起投诉，应被投诉人要求，向被投诉人披露，以便双方处理可能的权利纠纷;&lt;/p&gt;&lt;p&gt;　　4. 信息存储和交换&lt;/p&gt;&lt;p&gt;　　本应用收集的有关您的信息和资料将保存在本应用及(或)其关联公司的服务器上，这些信息和资料可能传送至您所在国家、地区或本应用收集信息和资料所在地的境外并在境外被访问、存储和展示。&lt;/p&gt;&lt;p&gt;　　5. Cookie的使用&lt;/p&gt;&lt;p&gt;　　(a) ↵在您未拒绝接受cookies的情况下，本应用会在您的计算机上设定或取用cookies,以便您能登录或使用依赖于cookies的本应用平台服务或功能。本应用使用cookies可为您提供更加周到的个性化服务，包括推广服务。&lt;/p&gt;&lt;p&gt;　　(b) ↵您有权选择接受或拒绝接受cookies。您可以通过修改浏览器设置的方式拒绝接受cookies。但如果您选择拒绝接受cookies，则您可能无法登录或使用依赖于cookies的本应用网络服务或功能。&lt;/p&gt;&lt;p&gt;　　(c) 通过本应用所设cookies所取得的有关信息，将适用本政策。&lt;/p&gt;&lt;p&gt;　　6.本隐私政策的更改&lt;/p&gt;&lt;p&gt;　　(a)如果决定更改隐私政策，我们会在本政策中、本公司网站中以及我们认为适当的位置发布这些更改，以便您了解我们如何收集、使用您的个人信息，哪些人可以访问这些信息，以及在什么情况下我们会透露这些信息。&lt;/p&gt;&lt;p&gt;　　(b)本公司保留随时修改本政策的权利，因此请经常查看。如对本政策作出重大更改，本公司会通过网站通知的形式告知。&lt;/p&gt;&lt;p&gt;　　方披露自己的个人信息，如联络方式或者邮政地址。请您妥善保护自己的个人信息，仅在必要的情形下向他人提供。如您发现自己的个人信息泄密，尤其是本应用用户名及密码发生泄露，请您立即联络本应用客服，以便本应用采取相应措施。&lt;/p&gt;&lt;p&gt;　　感谢您花时间了解我们的隐私政策!我们将尽全力保护您的个人信息和合法权益，再次感谢您的信任!&lt;/p&gt;&lt;p&gt;&lt;br/&gt;&lt;/p&gt;`
		}
	},
	methods: {
		getAgreement() {},
		toPage(url, type) {
			if (type == 'dr' && !this.agreement) return uni.showToast({ icon: 'none', title: '请先阅读并同意隐私政策' })
			this.$navTo(url)
		},
		login() {
			this.$store
				.dispatch('login', {
					email: this.email,
					password: this.password
				})
				.then(() => {
					this.$navTo('/dashboard')
				})
				.catch(() => {
					this.$notify({
						type: 'danger',
						title: 'Error',
						message: 'Invalid email or password'
					})
				})
		},
		getUserInfo(e) {
			console.log(e)
		},
		// 按钮点击事件: 获取微信手机号按钮
		// 实现目的: 在getphonenumber事件触发之前获取微信登录code
		// 因为如果在getphonenumber事件中获取code的话,提交到后端的encryptedData会存在解密不了的情况
		async clickPhoneNumber() {
			if (!this.agreement) return uni.showToast({ icon: 'none', title: '请先阅读并同意隐私政策' })
			this.code = await this.getCode()
		},

		// 微信授权获取手机号一键登录
		// getphonenumber事件的回调方法
		async handelMpWeixinMobileLogin({ detail }) {
			const app = this
			if (detail.errMsg != 'getPhoneNumber:ok') {
				console.log('微信授权获取手机号失败', detail.errMsg)
				// app.$error(detail.errMsg)
				return
			}
			app.isLoading = true

			store
				.dispatch('LoginMpWxMobile', {
					code: app.code,
					phoneCode: detail.code,
					type: 1,
					mobile: ''
				})
				.then(result => {
					// 显示登录成功
					app.$toast(result.msg)
					// 相应全局事件订阅: 刷新上级页面数据
					uni.$emit('syncRefresh', true)
					// 跳转回原页面
					setTimeout(() => app.onNavigateBack(1), 2000)
				})
				.catch(err => {
					if (err.result.status == -2) {
						app.$toast(err.result.msg)
						setTimeout(() => {
							this.toPage('pagesA/ParentalCertification')
						}, 1200)
						return
					}
					const resultData = err?.result?.data
					// 显示错误信息
					if (isEmpty(resultData)) {
						app.$toast(err.result.msg)
					}
					// 跳转回原页面
					if (resultData.isBack) {
						setTimeout(() => app.onNavigateBack(1), 2000)
					}
				})
				.finally(() => (app.isLoading = false))
		},

		// 获取微信登录的code
		// https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
		getCode() {
			return new Promise((resolve, reject) => {
				uni.login({
					provider: 'weixin',
					success: res => {
						console.log('code', res.code)
						resolve(res.code)
					},
					fail: reject
				})
			})
		},

		/**
		 * 登录成功-跳转回原页面
		 */
		onNavigateBack(delta = 1) {
			const pages = getCurrentPages()
			if (pages.length > 1) {
				uni.navigateBack({
					delta: Number(delta || 1)
				})
			} else {
				this.$navTo('pages/index/index')
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	.bg {
		height: 100vh;
		width: 100%;
	}
	.login-btn {
		width: 100%;
		bottom: 300rpx;
		position: absolute;
		text-align: center;
		.btn-wx {
			width: 496rpx;
			height: 84rpx;
			background: #66ff2b;
			border-radius: 42rpx;
			font-family: HarmonyOS Sans SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #010101;
			line-height: 84rpx;
			margin: 0 auto 40rpx;
		}
		.btn-phone {
			width: 496rpx;
			height: 84rpx;
			background: #ffffff;
			border-radius: 42rpx;
			font-family: HarmonyOS Sans SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #010101;
			line-height: 84rpx;
			margin: 0 auto;
		}
		.btn-none {
			text-align: center;
			color: #fff;
			margin: 20rpx 0;
		}
		.des {
			font-family: HarmonyOS Sans SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #ffffff;
			line-height: 34rpx;
			margin-top: 40rpx;
			.auth {
				color: #66ff2b;
				margin-left: 5rpx;
				font-size: 30rpx;
			}
		}
	}
	.agreementbox {
		position: fixed;
		left: 0;
		bottom: 20rpx;
		width: 750rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		.check_box_btn {
			height: 90rpx;
			width: 50rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
		.check_box1 {
			position: relative;
			height: 30rpx;
			width: 30rpx;
			background-color: #fd5615;
			border-radius: 50%;
			margin-right: 10rpx;
		}
		.check_box2 {
			position: relative;
			height: 30rpx;
			width: 30rpx;
			background-color: #fff;
			border: 3rpx solid #242424;
			border-radius: 50%;
			margin-right: 10rpx;
		}
		.check_img {
			position: absolute;
			height: 30rpx;
			width: 30rpx;
		}
		.xieyi {
			color: #fd5615;
		}
	}
	.agreementdetail {
		position: fixed;
		height: 100vh;
		width: 750rpx;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		align-items: center;
		justify-content: center;
		.title {
			font-size: 15px;
			font-weight: 600;
			text-align: center;
			margin-bottom: 30rpx;
		}
		.content {
			border-radius: 30rpx;
			height: 700rpx;
			width: 700rpx;
			padding: 30rpx 23rpx;
			background: #fff;
			overflow: scroll;
		}
	}
}
</style>
